<template>
	<view class="outbox">
		<!-- 标题栏 -->
		<view class="title">
			<view @click="back" class="icon"
				style="display: flex;align-items: center;justify-content: center;color: #fff;">
				<image src="../../static/user/back.svg"></image>
				<text>返回</text>
			</view>
			<view style="color: #fff;display: flex;align-items: center;justify-content: center;">
				绑定查询
			</view>
		</view>
		<!-- 查询框 -->
		<view class="card">
			<view class="query">
				<image src="../../static/search.svg" mode=""></image>
				<input type="text" @input="select" v-model="state.inputValue" placeholder="输入查询手机号">
			</view>
			<view class="content" v-if="state.res">
				<view class="contentItem">
					<view class="userName">
						{{state.otherUser.name}}
					</view>
					<view class="btn" @click="bind">
						+ 绑定
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="utoast"></u-toast>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		reactive,ref
	} from "vue";
	const utoast = ref(null)
	const state = reactive({
		inputValue: '',
		token: '',
		otherUser: {},
		res: false,
		userInfo: {}
	})
	onLoad((e) => {
		// console.log(e)
		state.userInfo = JSON.parse(e.userInfo)
		getToken()
		buildWebsocket()
	})
	// 建立websocket协议
	const buildWebsocket = () => {
		uni.connectSocket({
			url: `http://124.221.162.230:8888/websocket/${state.userInfo.id}`,
			method: 'POST',
			header: {
				Authorization: state.token
			},
			success: (res) => {
				// console.log(res)
				listenWebsocket()
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}
	// 监听websocket打开事件
	const listenWebsocket = () => {
		uni.onSocketOpen((res) => {
			// console.log(res)
		})
	}
	// 通过建立起的websocket发送数据
	const sendWebsocket = (str) => {
		let tost = utoast;
		uni.sendSocketMessage({
			data: str,
			success: (res) => {
				// console.log(res)
				utoast.value.show({
					type: 'success',
					title: '成功',
					message: "已发起绑定",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
			}
		})
	}
	// 返回上一页
	const back = () => {
		uni.closeSocket({
			success: () => {
				uni.navigateBack()
			}
		})
	}
	onUnload(() => {
		uni.closeSocket({
			success: () => {}
		})
	})
	// 获取token
	const getToken = () => {
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				state.token = res.data
			}
		})
	}
	// 查询绑定用户的信息
	const select = () => {
		uni.request({
			url: 'http://124.221.162.230:8888/user/findByLike',
			method: 'POST',
			header: {
				Authorization: state.token
			},
			data: {
				like: state.inputValue
			},
			success: (res) => {
				if (res.data.data.length) {
					state.otherUser = res.data.data[0]
					state.res = true
				} else {
					state.otherUser = {}
					state.res = false
				}
			}
		})
	}
	// 绑定
	const bind = () => {
		sendWebsocket(state.inputValue)
	}
</script>

<style lang="less" scoped>
	.outbox {
		width: 100vw;
		height: 100vh;
		background-color: #F4F8F9;

		.title {
			width: 100%;
			height: 160rpx;
			padding-top: var(--status-bar-height);
			background-color: #2A65A7;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: 1fr 2fr 1fr;

			.icon {
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.card {
			margin-top: 30rpx;
			width: calc(100% - 40rpx);
			margin-left: 20rpx;
			height: calc(100% - 260rpx);
			border-radius: 16rpx;
			background-color: #fff;
			overflow: hidden;

			.query {
				// margin-top: 20rpx;
				width: 100%;
				height: 100rpx;
				border-radius: 16rpx;
				background-color: #c6e2ff;
				padding: 10rpx 20rpx 10rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				input {
					margin-left: 30rpx;
					width: calc(100% - 90rpx);
					height: 100%;
					font-size: 34rpx;
				}
			}

			.content {
				margin-top: 10rpx;
				width: 100%;
				height: calc(100% - 120rpx);

				.contentItem {
					width: 100%;
					height: 100rpx;
					padding: 20rpx 40rpx 20rpx 40rpx;
					box-sizing: border-box;
					background-color: antiquewhite;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.userName {
						color: #79bbff;
					}

					.btn {
						width: 120rpx;
						height: 36rpx;
						border-radius: 18rpx;
						background-color: #79bbff;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>